<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta content="telephone=no" name="format-detection"/>
    <meta content="email=no" name="format-detection"/>
    <title>注册</title>
    <script type="text/javascript" src="js/rem_2.js"></script>
    <link rel="stylesheet" href="css/register.css"/>
</head>
<body>
<div class="g-container registerContainer">
    <div class="g-inputBox nameBox">
        <div class="inner">
            <input type="text" class="inputBox nameInput" value="" placeholder="请输入姓名">
        </div>
    </div>
    <div class="g-inputBox phoneBox">
        <div class="inner">
            <input type="text" class="inputBox phoneInput" value="" placeholder="请输入手机号码">
        </div>
    </div>
    <div class="verificationCodeBox g-clearfix">
        <div class="left g-fl">
            <input type="text" class="verificationCode" placeholder="请输入短信验证码">
        </div>
        <div class="right g-fr codeBtn">获取验证码</div>
    </div>
    <div class="submitBtn">下一步</div>
</div>
<!--弹窗提示-->
<div class="g-tip g-errorTip g-hide">手机号码格式错误</div>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
    var $codeBtn,$submitBtn;
    $codeBtn=$(".codeBtn");
    $submitBtn=$(".submitBtn");
    var $name,$phone,$code;
    $name=$(".nameInput");
    $phone=$(".phoneInput");
    $code=$(".verificationCode");


    /**
     * 手机号-输入时校验--如果校验成功，验证码按钮激活
     * */
    $phone.keyup(function () {
        var $this,thisVal,reg;
        $this=$(this)
        thisVal=$this.val()
        reg=/^1\d{10}$/
        if(reg.test(thisVal)){
            $codeBtn.addClass("active")
        }else {
            $codeBtn.removeClass("active")
        }
    })

    /**
     * 验证码-输入时校验--如果有值，下一步按钮激活
     * */
    $code.keyup(function () {
        var $this,thisVal;
        $this=$(this)
        thisVal=$this.val()
        if(thisVal){
            $submitBtn.addClass("active")
        }else {
            $submitBtn.removeClass("active")
        }
    })
    /**
     * 点击获取验证码
     * */
    $(".codeBtn").click(function () {
        var $this,time1=60,timer;
        $this=$(this);
        if($this.hasClass("active") && !$this.hasClass("in")){
            $this.html(time1+"s…")
            timer = setInterval(function () {
                time1--;
                if(time1==0){
                    $this.html("获取验证码").removeClass("in")
                    clearInterval(timer)
                }else {
                    $this.html(time1+"s…").addClass("in")
                }
            },1000)
        }
    })

    /**
     * 点击-下一步
     * */
    var $errorTip,nameVal,phoneVal,codeVal;
    $errorTip=$(".g-errorTip");
    $submitBtn.click(function () {
        nameVal=$name.val()
        phoneVal=$phone.val()
        codeVal=$code.val()
        if(!$(this).hasClass("active")){
            showTip("请完善信息")
            return
        }
        if(nameVal==''){
            showTip("请输入姓名")
            return
        }
        var reg=/^1\d{10}$/
        if(!reg.test($phone.val())){
            showTip("手机号码格式错误")
            return
        }
        if(codeVal==''){
            showTip("请输入短信验证码")
            return
        }
        /**
         * 提交请求--start
         * ajax
         * */

    })
    function showTip(mes) {
        $errorTip.html(mes).show()
        setTimeout(function () {
            $errorTip.hide()
        },2000)
    }
</script>
</body>
</html>